<template>
	<view>
		<basetab name='浏览历史'></basetab>
		<view class="pageView m-t-20">
			<view style="display: flex;">
							<view @click="trage(item.name)" :class="'box1 ' + (chooseList.indexOf(item.name) == -1 ? '':'trages') " class="box1" v-for="(item,index) in tablist" :key="index">
								{{item.name}}
							</view>
						</view>
			
			<view style="" >
					<view class="" v-if="chooseList[0]=='我关注的'" v-for="(item,index) in list" :key="index" style="background-color: #fff; margin-top: 20rpx; padding: 20rpx 32rpx;"  >
						<view class="font-size: 24rpx;font-weight: 500;color: rgba(0, 0, 0, 1);">
							浏览时间:2020-03-04
						</view>
						<view class="bgs m-t-20" style="position: relative;">
							<image  style="width: 120rpx; height: 40rpx;position: absolute; top: 0; left: 0;" src='../../static/my/ku.png' mode=""></image>
							<text  style="position: absolute;top: 2rpx;left: 5rpx; font-size: 24rpx;font-weight: 500;color: rgba(255, 255, 255, 1);">特别推荐</text>
							<view  style=" display: flex; align-items: flex-end; justify-content: space-between; height:100% ; margin: 10rpx ;" >
								<view class="" style=" font-size: 24rpx;font-weight: 700;color: rgba(255, 255, 255, 1);margin-bottom: 20rpx;  ">
									推荐老师Hello 贰月
								</view>
								<view style="margin-bottom: 20rpx;">
									<view style="color: #fff; opacity: 1;border-radius: 25rpx; border: 1rpx solid #fff; padding: 3rpx 10rpx;font-size: 16rpx;font-weight: 500;">
										参与次数:102301次
									</view>
									<view style="margin-top: 10rpx; color: #fff; opacity: 1;border-radius: 25rpx; border: 1rpx solid #fff; padding: 3rpx 10rpx;font-size: 16rpx;font-weight: 500;">
										参与次数:102301次
									</view>
								</view>
							</view>
						</view>
					</view>
					<view class="" v-if="chooseList[0]=='我参与的'" v-for="(item,index) in list" :key="index" style="background-color: #fff; margin-top: 20rpx; padding: 20rpx 32rpx;"  >
						<view class="font-size: 24rpx;font-weight: 500;color: rgba(0, 0, 0, 1);">
							浏览时间:2020-03-04
						</view>
						<view class="bgs m-t-20" style="position: relative;">
							<image  style="width: 120rpx; height: 40rpx;position: absolute; top: 0; left: 0;" src='../../static/my/ku.png' mode=""></image>
							<text  style="position: absolute;top: 2rpx;left: 5rpx; font-size: 24rpx;font-weight: 500;color: rgba(255, 255, 255, 1);">特别推荐</text>
							<view  style=" display: flex; align-items: flex-end; justify-content: space-between; height:100% ; margin: 10rpx ;" >
								<view class="" style=" font-size: 24rpx;font-weight: 700;color: rgba(255, 255, 255, 1);margin-bottom: 20rpx;  ">
									推荐老师Hello 贰月
								</view>
								<view style="margin-bottom: 20rpx;">
									<view style="color: #fff; opacity: 1;border-radius: 25rpx; border: 1rpx solid #fff; padding: 3rpx 10rpx;font-size: 16rpx;font-weight: 500;">
										参与次数:102301次
									</view>
									<view style="margin-top: 10rpx; color: #fff; opacity: 1;border-radius: 25rpx; border: 1rpx solid #fff; padding: 3rpx 10rpx;font-size: 16rpx;font-weight: 500;">
										参与次数:102301次
									</view>
								</view>
							</view>
						</view>
					</view>
			</view>
			<view  v-if="!list.length>=1" class="fr-c-d">
			
				<view style="margin-bottom: 80rpx;margin-top: 380rpx;">
					<image style="width: 200rpx; height: 190rpx;" src='../../static/my/My Project.png' mode=""></image>
				</view>
				<view style="font-size: 24rpx;font-weight: 400;color: rgba(204, 204, 204, 1);">
					小主，您还没有任何的收藏哦
				</view>
			</view>
		</view>
	</view>
</template>

<script>
import basetab from '../../componets/bartop.vue'
	export default {
		components:{
		
			basetab
		
		},
		data() {
			return {
				
				list:[
					{name:1},
					{name:1},
					{name:1}
				],
				chooseList: ['我关注的'],
								tablist:[
									
									{name:'我关注的'},
									{name:'我参与的'}
								]
							
			}
		},
		methods: {
			trage(item) {
								this.chooseList=[]
							if (this.chooseList.indexOf(item) == -1) {
								this.chooseList.push(item)
							} else {
								this.chooseList.splice(this.chooseList.indexOf(item), 1)
							}
							console.log('trage', this.chooseList);
						},

			changtap(index) {
				this.tabindex = index;
			},
		}
	}
</script>

<style>
	.box1{
		display: flex;
	align-items: center;
	justify-content: center;
		font-size: 28rpx;
		font-weight: 400;
		letter-spacing: 0rpx;
		line-height: 0rpx;
		color: rgba(255, 141, 26, 1);
		width: 170rpx;
		height: 60rpx;
		opacity: 1;
		
		border: 2rpx solid rgba(255, 136, 0, 1);            
	}
	.trages{
		background-color: rgba(255, 136, 0, 1);
		color: #fff;
	}
	.bgs{
		width: 684rpx;
		height: 240rpx;
		opacity: 1;
		border-radius: 10px;
		background: url(https://img.js.design/assets/smartFill/img268164da72e058.jpeg) no-repeat;
		background-size:100% 100%;
		
		background-attachment:fixed;
		/* background-image: url('	https://static.699pic.com/images/diversion/58c6bd759e279cc57659f82fb79e0956.jpg'); */
	}
	.s2{
		position: absolute; 
		top: 12rpx;
		left: 15rpx;
		font-size: 16rpx;
		font-weight: 500;
		letter-spacing: 0px;
		line-height: 0px;
		color: rgba(255, 255, 255, 1);
	}
	.s1{
		font-size: 28rpx;
		font-weight: 500;
		letter-spacing: 0px;
		line-height: 0px;
		color: rgba(0, 0, 0, 1);
	}
	.s3{
	font-size: 24rpx;
	font-weight: 500;
	letter-spacing: 0px;
	line-height: 0px;
	color: rgba(212, 48, 48, 1);
	}
	.s4{
		
		margin-top: 12rpx;
		font-size: 22rpx;
		font-weight: 400;
			display: -webkit-box;
			overflow: hidden;
			-webkit-line-clamp: 3;
			-webkit-box-orient: vertical;
		color: rgba(204, 204, 204, 1);
	}
	.s5{
		font-size: 20rpx;
		font-weight: 500;
		
		color: rgba(0, 0, 0, 1);
	}
	.s6{
		font-size: 14rpx;
		font-weight: 400;
	
		color: rgba(204, 204, 204, 1);
	}
	.s7{
		font-size: 14rpx;
		font-weight: 400;
	
		color: rgba(255, 141, 26, 1);
	}
.active {
	
	border-bottom:1rpx solid rgba(255, 135, 2, 1);
}
</style>
